<template>
	<div class="collapse-panel">
		<div class="collapse-header" @click="toggle">
			<slot name="header">{{ title }}</slot>
			<button class="collapse-btn">
				<span>{{ isCollapsed ? '+' : '-' }}</span>
			</button>
		</div>
		<div class="collapse-content" v-show="!isCollapsed">
			<slot>面板内容</slot>
		</div>
	</div>
</template>

<script setup lang="ts">
// 简易的折叠面板
import { ref } from 'vue';

defineOptions({
	name: 'MkCollapsePanel'
})

const props = defineProps({
	title: {
		type: String,
		default: '' // 默认不显示标题栏
	},
	collapsed: { // 默认折叠
		type: Boolean,
		default: true
	}
})

const isCollapsed = ref(props.collapsed);

const toggle = () => {
	isCollapsed.value = !isCollapsed.value;
};
</script>

<style scoped>
.collapse-panel {
	border-radius: 4px;
	margin-right: 5px;
	margin-bottom: 5px;
}

.collapse-header {
	padding: 10px;
	background-color: #fff;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.collapse-btn {
	background: none;
	border: none;
	cursor: pointer;
	outline: none;
	font-size: 1.5em;
}

.collapse-content {
	background-color: #fff;
	border: 0px solid #ccc;
	padding: 10px;
}
</style>
